

export default class PinPaiArea extends  React.Component{
    constructor(props) {
        super(props);
        this.state={
            selected:-1
        }
        this.lists=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

    }

    render(){
        const {selected}=this.state
        return(
            <div className={'app-content-warpper-1'}>
                <div style={{width:1200,position:'relative'}}>
                    <p style={{color:'#000',fontSize:18,marginBottom:20}}>品牌专区</p>
                    <div className={'pingpai-area-box'}>

                        {
                            this.lists.map((item,index)=>(
                                <div
                                    key={index}
                                    className={selected==index? 'pingpai-area-item-choose': this.getClassName(index)}
                                    onMouseOver={()=>{
                                        this.setState({
                                            selected:index
                                        })
                                    }}
                                    onMouseOut={()=>{
                                        this.setState({
                                            selected:-1
                                        })
                                    }}
                                >
                                </div>
                            ))
                        }

                    </div>
                </div>
            </div>

        )
    }

    getClassName(index){
        if(index==4||index==9){
            return 'pingpai-area-item product-item-border-bottom'
        }
        else if(index==14){
            return 'pingpai-area-item'
        }

        else if(index>=10){
            return 'pingpai-area-item product-item-border-right'
        }
        else{
            return 'pingpai-area-item product-item-border-right product-item-border-bottom'
        }
    }
}